<template>
  <div class="main-container">
    <div
      class="main-aside"
      :style="{ width: isCollapse === true ? '64px' : '200px' }"
    >
      <el-menu
        :collapse="isCollapse"
        background-color="#304156"
        text-color="#fff"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">菜单1</span>
          </template>

          <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

          <el-menu-item index="2">
              <i class="el-icon-menu"></i>
            <span slot="title">菜单2</span>
          </el-menu-item>

          <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">菜单3</span>
          </el-menu-item>

          <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">菜单4</span>
          </el-menu-item>
      </el-menu>

    </div>

    <div class="main-content">
      <div class="content-header">

        <div class="navbar">

          <el-button
          @click="isCollapse = !isCollapse"
          :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold' "
          type="text"
          style="font-size:30px;"
          ></el-button>

        </div>
        <div class="tags-view-container"></div>
      </div>

      <div class="content-view">下</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    mounted(){
        // sessionStorage
     
        // 存数据
        sessionStorage.setItem("伍广",'20');//存字符串
        sessionStorage.setItem('key2',100);//存数字
        sessionStorage.setItem('key3',JSON.stringify([1,2,3,4,5]));//存数组

        //取数据
        console.log(sessionStorage.getItem('key3'));
        console.log(typeof sessionStorage.getItem('key3'));
        console.log(JSON.parse(sessionStorage.getItem('key3')));

        //删除session
        sessionStorage.removeItem('key1')

        //注意点:
        //两者的区别
        //存储的时间
        //session  关闭浏览器会清空
        //local    永久存储
        //相对于浏览器的访问地址



        // localStorage
        localStorage.setItem('key1','value1')
        localStorage.setItem('key2',100);//存数字
        localStorage.setItem('key3',JSON.stringify([1,2,3,4,5]));//存数组

         //取数据
        console.log(localStorage.getItem('key3'));
        console.log(typeof localStorage.getItem('key3'));
        console.log(JSON.parse(localStorage.getItem('key3')));

         //删除session
        localStorage.removeItem('key1')

        this.getData();
    },
    data(){
        return{
            isCollapse:true
        }
    },
    methods:{
        getData(){
            axios({
                url:'http://127.0.0.1:3000/api/test/crud/list',
                method:'get',
                params:{
                    pageIndex:1,
                    pageSize:10,
                    questionContent:'',
                    status:''
                },
                headers:{
                    'content-Type':'application/json; charset=utf-8',
                    'token':'this is my token project'
                }
            }).then(res=>{
                console.log(res);
            })
        }
    }

}
</script>


<style lang="scss" scoped>
.main-container {
  display: flex;
  height: 100%;

  .main-aside {
    width: 180px;
    background-color: rgb(45, 65, 86);
  }
  .main-content {
    flex: 1;

    .content-header {
      width: 100%;
      height: 84px;
      border-bottom: 1px solid #ddd;
      box-shadow: 0 1px 2px #ddd;

      .navbar {
        height: 50px;
      }
      .tags-view-container {
        height: 34px;
      }
    }
  }
  .el-menu{
      border-right: solid 0 transparent;

      .el-submenu{
          .el-menu{

              .el-menu-item-group{
                  background: #1f2d3d;

                  ul{
                      li.el-menu-item{

                          background-color: #1f2d3d !important;
                      }
                  }
              }
          }
      }
  }
}
</style>